<template>
    <div class="page-header">
        <el-button @click="onUserAdd" type="primary">添加管理员</el-button>
    </div>
    <div class="page-card">
        <el-table ref="multipleTable" :data="state.userList" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column prop="username" label="用户名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="group_name" label="用户组" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="login_ip" label="登录IP" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="last_login_time" :formatter="$utils.timeFormat" label="最后登录时间" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="create_time" :formatter="$utils.timeFormat" label="创建时间" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="onUserEdit(scope.row)" size="small">编辑</el-button>
                    <el-button type="danger" @click="deleteUser(scope.row.id,scope.$index)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加管理员弹窗 -->
        <el-dialog :title="state.dialogTitle" v-model="state.dialogFormVisible">
            <el-form :model="state.form" ref="form">
                <el-form-item label="用户角色" label-width="70px">
                    <el-select v-model="state.form.group_id" placeholder="请选择用户组">
                        <el-option v-for="item in state.groupList" :key="item.group_id" :label="item.name"
                            :value="item.group_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" label-width="70px">
                    <el-input v-model="state.form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="70px">
                    <el-input v-model="state.form.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="onCancel">取 消</el-button>
                <el-button type="primary" :loading="state.btnLoading" @click="saveForm">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
import http from "@/utils/request";
import { ElMessage, ElMessageBox } from 'element-plus'
import md5 from 'js-md5';

const state = reactive({
    dialogTitle: "添加管理员",
    userList: [],
    btnLoading: false,
    dialogFormVisible: false,
    form: {
        group_id: "",
        username: "",
        password: ""
    },
    groupList: []
})

onMounted(() => {
    handleUserList();
    getGroupList();
})

function onCancel() {
    state.btnLoading = false;
    state.dialogFormVisible = false;
}

function saveForm() {
    state.btnLoading = true;
    let form = state.form;

    form.password = md5(form.password);
    http.post("/admin/user/save", form).then(res => {
        if (res.code == 200) {
            ElMessage.success("保存成功")
            state.dialogFormVisible = false;
        }

        state.btnLoading = false;
    })
}

function onUserAdd() {
    state.dialogTitle = "添加管理员";
    state.dialogFormVisible = true;
    state.form = {
        group_id: "",
        username: "",
        password: ""
    }
}

function onUserEdit(userInfo) {
    state.dialogFormVisible = true;
    state.dialogTitle = "编辑";
    state.form = userInfo;
    state.form.password = "";
}

function getGroupList() {
    http.get("/admin/user/roleList").then(res => {
        state.groupList = res.result;
    })
}


function handleUserList() {
    http.get("admin/user/adminList").then((res) => {
        state.userList = res.result;
    });
}

function deleteUser(userId, index) {
    ElMessageBox.confirm(
        '此操作将删除该用户, 是否继续?',
        '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }
    ).then(() => {
        http.post("admin/user/delAdmin", {
            user_id: userId
        }).then(res => {
            if (res.code == 200) {
                state.userList.splice(index, 1)
                ElMessage.success("删除成功");
            }
        })
    })
}
</script>
<style>

</style>